<template>
  <div>
    <cus-search>
      <cus-search-item>
        <Form :model="searchForm" :label-width="80">
          <FormItem label="起止时间" class="mr_48 mb_20">
            <cus-cascadeDate :startTime.sync="searchForm.startTime" :endTime.sync="searchForm.endTime"
              :showWeekNum="false" :need-init="false" :only-month="false" type="datetime" :dateWidth="320"></cus-cascadeDate>
              <!-- <cus-cascadeDate :startTime.sync="searchForm.startTime" :showWeekNum="false" :endTime.sync="searchForm.endTime"
							:need-init="false" :only-month="false" type="datetime" format="yyyy-MM-dd" :dateWidth="200"></cus-cascadeDate> -->
          </FormItem>
          <FormItem label="伙食单位" class="mr_48 mb_20">
            <Select style="width: 200px" v-model="searchForm.unitCode">
              <Option v-for="item in unitList" :key="item.id" :value="item.unitCode">{{ item.unitName }}
              </Option>
            </Select>
          </FormItem>
          <cusButton size="small" class="mr_10 mb_20" type="primary"
            @onClick="() => { this.pageOption.page = 1; this.onInit() }">查询</cusButton>
          <cusButton size="small" class="mr_10 mb_20" type="primary" ghost @onClick="onReset">重置</cusButton>
        </Form>
      </cus-search-item>
    </cus-search>
    <div class="bottomPanel">
      <cus-card title="留样台账列表">
      <cus-table :border="true" :loading="searchForm.loading" :columns="columns" :data="data"
        :size="vuex_config.tableSize" :bottomClass="['cus-page']">
        <template slot-scope="{row}" slot="gmtKeep">
          <!-- {{ row.gmtKeep | formatTime('hh:mm') }} -->
          {{ row.gmtKeep }}
        </template>
        <template slot-scope="{row}" slot="gmtCook">
          <!-- {{ row.gmtCook | formatTime('yyyy-MM-dd') }} -->
          {{ row.gmtCook }}
        </template>
        <template slot-scope="{row}" slot="gmtTake">
          <!-- {{ row.gmtTake | formatTime('yyyy-MM-dd hh:mm:ss') }} -->
          {{ row.gmtTake }}
        </template>
        <template slot-scope="{row}" slot="gmtCreate">
          <!-- {{ row.gmtCreate | formatTime('yyyy-MM-dd hh:mm:ss') }} -->
          {{ row.gmtCreate }}
        </template>
        <template slot-scope="{row}" slot="amount">
          {{ row.alreadyAmount }} / {{ row.amount }}
        </template>
        <template slot-scope="{row}" slot="hasEx">
          <tag color="primary" v-if="row.hasEx === 0">无</tag>
          <tag color="error" v-if="row.hasEx === 1">有</tag>
        </template>

        <template slot-scope="{row}" slot="mealTimes">
          {{ row.mealTimes === 0 ? '早餐' : '' }}
          {{ row.mealTimes === 1 ? '午餐' : '' }}
          {{ row.mealTimes === 2 ? '晚餐' : '' }}
        </template>
      </cus-table>
      <div style="width: 100%; display: flex; justify-content: flex-end">
          <cus-page class="mt_20" :data="pageOption" @pageChange="onInit"></cus-page>
      </div>
    </cus-card>
    <!-- <cus-footer :showWaterMark="false">
      <div style="width: 100%;display: flex;justify-content: flex-end;padding-right: 20px;">
        <cus-page :data="pageOption" @pageChange="onInit"></cus-page>
      </div>
    </cus-footer> -->
    </div>
  </div>
</template>

<script>
import { getSubCanteenList } from "@/api/organ/organization";
import { getSamplesDailyList, } from '@/api/organ/business'
export default {
  name: 'samplesDaily',
  data() {
    return {
      searchForm: {
        loading: false,
        startTime: '',
        endTime: '',
        unitCode: '',
      },
      data: [],
      columns: [
        {
          title: '序号',
          width: 70,
          key: 'name',
          type: 'index',
          align: 'center'
        },
        {
          title: '日期',
          minWidth: 120,
          slot: 'gmtCook',
          align: 'center'
        },
        {
          title: '餐次',
          minWidth: 100,
          slot: 'mealTimes',
          align: 'center'
        },
        {
          title: '留样时间',
          minWidth: 140,
          slot: 'gmtKeep',
          align: 'center'
        },
        {
          title: '留样人',
          minWidth: 100,
          key: 'operator',
          align: 'center'
        },
        {
          title: '留样柜编号',
          minWidth: 100,
          key: 'num',
          align: 'center'
        },
        {
          title: '菜品数量\n（留样数/总菜数）',
          minWidth: 100,
          slot: 'amount',
          align: 'center'
        },
        {
          title: '重量达标个数',
          minWidth: 100,
          key: 'achieve',
          align: 'center'
        },
        {
          title: '取样时间',
          minWidth: 100,
          slot: 'gmtTake',
          align: 'center'
        },
        {
          title: '取样人',
          minWidth: 100,
          key: 'takeOperator',
          align: 'center'
        },
        {
          title: '有无异常开门',
          minWidth: 100,
          slot: 'hasEx',
          fixed: 'right',
          align: 'center'
        }
      ],
      unitList: [],
      pageOption: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      }
    }
  },
  computed: {},
  mounted() {
    this.getSubCanteenList();
  },
  methods: {
    onInit() {
      this.getSamplesDailyListApi()
    },
    // 重置查询条件·
    onReset() {
      this.resetFilterForm();
      this.onInit();
    },
    resetFilterForm() {
      this.searchForm.startTime = '';
      this.searchForm.endTime = '';
      this.searchForm.unitCode = this.unitList[0].unitCode;
      this.pageOption.page = 1;
      console.log(this.searchForm)
    },
    getSubCanteenList() {
      getSubCanteenList().then((res) => {
        if (res.code == 1) {
          this.unitList = res.data.list;
          this.searchForm.unitCode = res.data.list[0].unitCode;
          // this.getDisinfectModeListApi();
          this.onInit();
        }
      });
    },
    getSamplesDailyListApi() {
      this.searchForm.loading = true
      return new Promise(resolve => {
        getSamplesDailyList({
          org: this.searchForm.unitCode,
          currentPage: this.pageOption.page,
          pageSize: this.pageOption.pageSize,
          startTimeQuery: this.searchForm.startTime,
          endTimeQuery: this.searchForm.endTime,
        }).then(res => {
          if (res.code === 1) {
            this.searchForm.loading = false
            this.data = res.result.list
            this.pageOption.pageTotal = res.result.total
            resolve()
          } else {
            this.searchForm.loading = false
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.bottomPanel {
    background-color: #fff;
    /* padding-top: 10px; */
    /* padding-bottom: 10px; */
    margin-top: 20px;
    border-radius: 6px;
    box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
}
</style>
